<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #container {
                position: relative;
            }

            .bubble {
                position: absolute;
                border-radius: 50%;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <canvas id="canvas" width="512" height="512" style="display: none;"></canvas>
        </div>
        <script type="application/javascript">
            function randomImg() {
                const imgList = [
                    'https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto',
                    'https://img2.baidu.com/it/u=586607866,2734281005&fm=26&fmt=auto',
                    'https://img2.baidu.com/it/u=3642339878,2140733972&fm=26&fmt=auto',
                    'https://img1.baidu.com/it/u=3427821080,1838386749&fm=26&fmt=auto',
                    'https://img2.baidu.com/it/u=2495527324,3464927527&fm=26&fmt=auto'
                ]
                const index = Math.floor(Math.random() * imgList.length)
                return imgList[index]
            }

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            var image = new Image();
            image.src = "./imgs/ds.jpg";
            image.onload = function () {
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.drawImage(image, 0, 0);

                var imageData = ctx.getImageData(0, 0, image.width, image.height).data;
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0, 0, image.width, image.height);

                var gap = 15;

                // 绘制点信息
                // for (var h = 0; h < image.height; h += gap) {
                //     for (var w = 0; w < image.width; w += gap) {
                //         var position = (image.width * h + w) * 4;
                //         var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];

                //         if (r + g + b == 0) {
                //             ctx.fillStyle = "#000";
                //             ctx.fillRect(w, h, 6, 6);
                //         }
                //     }
                // }

                var dragonContainer = document.getElementById("container");
                var dragonScale = 2;

                for (var h = 0; h < image.height; h += gap) {
                    for (var w = 0; w < image.width; w += gap) {
                        var position = (image.width * h + w) * 4;
                        var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
                        if (r + g + b == 0) {
                            var bubble = document.createElement("img");
                            bubble.src = randomImg();
                            bubble.setAttribute("class", "bubble");

                            var bubbleSize = Math.random() * 10 + 20;
                            bubble.style.left = (w * dragonScale - bubbleSize / 2) + "px";
                            bubble.style.top = (h * dragonScale - bubbleSize / 2) + "px";
                            bubble.style.width = bubble.style.height = bubbleSize + "px";
                            bubble.style.animationDuration = Math.random() * 6 + 4 + "s";
                            dragonContainer.appendChild(bubble);
                        }
                    }
                }
            }



        </script>
    </body>

</html>